<template>
	<view class="bg-gray">
		<view class="swipecarouselback">
			<image src="https://www.haopengsong.xyz//static/arrleft.png" class="arricon" @click="jump"></image>
			<carousel :res="carouselImage" class="bgshare" height='500' />
		</view>
		<view class="width">
			<view class="linebox">
				<view class="bg-white commonbg">
					<view class="font15 flex-row-between bold">
						歌舞厅
					</view>
					<view class="color6 fontbottom">
						结合了视觉与听觉艺术的娱乐场所,它有着宽大的银幕,能够为观众们带来震撼的视听盛宴。
					</view>
				</view>
				<view class="bg-white boxin">
					<view class="flex-row-between boxitem">
						预约日期
						<view>
							2024-08-26
							<u-icon name='arrow-right'></u-icon>
						</view>
					</view>
				</view>
				<view class="bg-white boxin">
					<view class="boxitem">
						预约时段
						<view class="yuyue flex-row-between">
							<view v-for='(item,index) in timeList' 
								@click="chooseIndex = index"
								:key='index' 
								:class="chooseIndex == index ? 'timecur' : ''"
								class="time font12 flex-row-between">
								 {{item}}
								<view class="shape font12">{{index}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view  class="apply">
				<u-button type="primary" shape='circle' @click="submit">确认预约</u-button></view>
			</view>
		</view>
	</view>
</template>

<script>
	import tpl_banner from "@/pages/tabbar/roperty/template/tpl_banner"; 
	import bottomsubmit from "@/components/huashuiwan/bottomsubmit.vue"; 
	export default {
		components: {
			carousel: tpl_banner,
			bottomsubmit
		},
		data(){
			return {
				timeList:['09:00~12:00','12:00~15:00','15:00~18:00','18:24~24:00'],
				chooseIndex:0,
				carouselImage:[
					{ name:'https://www.haopengsong.xyz/static/movie/songdetailbg.png'}
				],
				username:'',
				tel:'',
				jtel:'',
			}
		},
		methods:{
			jump(res){
				// 返回上一页
				uni.navigateBack({
				    delta: 1 // 默认值是1，表示返回的页面层数
				});
			},
			submit(){
				uni.showToast({
					title: "预定成功！",
					icon: "none",
					duration: 1500,
				});
				setTimeout(function () {
					// 返回上一页
					uni.navigateBack({
					    delta: 1 // 默认值是1，表示返回的页面层数
					});
				},2000)
				
			},
		}
	}
</script>

<style lang="scss" scoped>
 .width{
	 position: relative;
	 top:-40px;
	 padding-bottom: 50px;
 }
 .commonbg{
	 margin: 0;
 }
 .boxin,.linebox{
	 margin-top: 10px;
 }
 .time{
	 width: 48%;
 }
 .apply{
	 margin-top:30px;
 }
</style>